<template>
	<view>
		<view>
			<table-title content="收费服务申请表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<small-title content="收费服务信息"></small-title>
			<view class="goods-title">名称：{{goodsName}}</view>
			<image class="goods-image" :src="goodsImg" mode="scaleToFill" @tap='chooseImage'></image>
			<view class="goods-title">描述：{{goodsDetail}}</view>
			<view class="goods-title">费用：{{goodsUnitPrice}}元</view>
			<view v-if="state==='待申请'">
				<con-advance-pay-small-title content="支付方式"></con-advance-pay-small-title>
				<view style="display: flex;justify-content: center;">
					<radio-group class="payway-style" @change="changePayway">
						<label style="display: flex;">
							<radio :checked="payway[0]" :disabled="state!=='待申请'" class="first-radio" color="#FF0000" value="alipay"></radio>
							<view class="payway-choice">
								<image src="../../../static/alipay-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">支付宝支付</view>
							</view>
						</label>
						<label style="display: flex;">
							<radio :checked="payway[1]" :disabled="state!=='待申请'" class="second-radio" color="#FF0000" value="wechat"></radio>
							<view class="payway-choice">
								<image src="../../../static/wechat-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">微信支付</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="state==='待确认完成'" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="modOrder">确认服务完成</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="state==='待申请'" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="confirmItem" >立即申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder,
		syncGoodsInfo,
	} from "../../../util/network.js"
	import {
		processHistoryList,
		getNowFormatDate,
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				status:-1,
				recordId: -1,
				processNo:'待分配',
				state: '已受理',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				serviceId:0,
				goodsName:"",
				goodsDetail:"",
				goodsNum:1,
				goodsUnitPrice:0,
				allPrice:0,
				goodsImg:"",
				borrowDate:"",
				payway: [true, false],                                                            //支付方式
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				token:'',
			}
		},
		methods: {
			confirmItem(){
				let b = syncGetOrder("paid-service/show/" + this.serviceId)
				b.then((res)=>{
					 console.log("收费服务异步",res)
					 if(res.data.code == 200){
						 if(res.data.data.status != 0){
							this.state = "服务已下架"
							uni.showModal({
								content:'该服务已删除或下架',
								showCancel:false
							})
							// uni.navigateBack()
						 }else{
							 this.onlinePay()
						 }
					}
				})
			},
		    onlinePay(){
		    	let orderInfo = "等后端接口"
				let orderNo = ""
		    	let paywaySingle = ''
				let _this = this
				let extraInfo = {
						startTime: this.borrowDate.toString(),                        //待写入工单内容
						price: Number(this.allPrice),
						paidServiceId: parseInt(this.serviceId),
						commentMsg: '发起申请'                       //操作信息
					} 
		    	if(this.payway[0]){
		    		paywaySingle = 'alipay'
		    	}else{
		    		paywaySingle = 'wxpay'
		    	}
		    	uni.request({
		    		url:`${ONLINE_SERVER_ADDRESS_BASE}/pay/pay`,
		    		header: {
		    			'Authorization': this.token,
		    		},
		    		data: {
		    			orderName: "收费服务",
		    			payPlatform: paywaySingle,                        //待写入工单内容
						orderType:3,
						extraInfo:JSON.stringify(extraInfo),
						amount: Number(this.allPrice),
						recordId:-1,
		    		},
		    		method:'POST',
		    		success: function (res) {
		    			console.log("提交成功",res.data);
		    			if(res.data.code == 200){
		    				if(paywaySingle == 'wxpay'){
		    					orderInfo = res.data.data.wxPayOrderInfo
								orderNo = res.data.data.orderNo
		    				}else{
		    					orderInfo = res.data.data.aliPayOrderInfo
								orderNo = res.data.data.orderNo
		    				}
		    				uni.requestPayment({  
		    					provider: paywaySingle,  
		    					orderInfo: orderInfo,  
		    					success: (e) => {  
		    						console.log(e); 
									uni.navigateBack()
									// _this.addOrder(orderNo)
		    					},  
		    					fail: (e) => {  
									console.log(e);
		    					}  
		    				});
		    			}
		    		}
		    	})
		    },
			changePayway(e){
				console.log('-change事件:', e.detail.value)
				if(e.detail.value == "alipay"){
					this.payway=[true,false];
				}else{
					this.payway=[false,true];
				}
			},
			chooseImage(){
				uni.previewImage({
					current: 0,
					urls: [this.goodsImg]
				})
			},
			
			/*
			功能：工单详细页处理通用函数
			参数：
			option：操作类型（先定成 创建、写入、查询）
			*/
			addOrder(orderNo){
				console.log("[info]","工单已创建，工单号为：" + this.borrowDate)
				console.log("[info]","工单已创建，工单号为：" + parseInt(this.allPrice))
				console.log("[info]","工单已创建，工单号为：" + parseInt(this.serviceId))
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/paid-service-application/add`,
					header: {
						'Authorization': this.token,
					},
					data: {
						orderNo:orderNo,
						startTime: this.borrowDate.toString(),                        //待写入工单内容
						price: Number(this.allPrice),
						paidServiceId: parseInt(this.serviceId),
						commentMsg: '发起申请'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("提交成功",res.data);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					}
				})
			},
			modOrder(){
				console.log("[info]","确认完成服务：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/paid-service-application/finish/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: '用户已确认完成服务'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("确认完成服务成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("确认完成服务调用失败")
					}
				})
			},
			async loadImg(chargeFileId){
				const res = await uni.downloadFile({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/file/download/` + chargeFileId,
					header: {
						'Authorization': this.token,
					},
				})
				return new Promise((resolve, reject) => {
				        resolve(res[1].tempFilePath)
						// resolve(res)
				})
			},
			getServiceInfo(serviceId){
				let b = syncGetOrder("paid-service/show/" + serviceId)
				b.then((res)=>{
					 console.log("收费服务异步",res)
					 if(res.data.code == 200){
						 this.goodsName = res.data.data.title
						 this.goodsDetail = res.data.data.intro
						 this.goodsUnitPrice = res.data.data.price
						 this.allPrice = this.goodsUnitPrice
						 let b = this.loadImg(res.data.data.picture.split(',')[0])
						 // let b = this.loadImg(267)
						 b.then((v)=>{
							 // console.log(v)
						 	this.goodsImg = v
						 })
						 this.$forceUpdate()
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("paid-service-application/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("物品订单异步",res)
					 if(res.data.code == 200){
						 switch(parseInt(res.data.data.status)) {
						 	 case 0:
						 		this.state = "待管家确认"
						 		break;
						 	 case 1:
						 		this.state = "服务进行中"
						 		break;
						 	 case 2:
						 		this.state = "待确认完成"
						 		break;
						 	 case 3:
						 		this.state = "已办结"
						 		break;
						 	 case 4:
						 		this.state = "已退款"
						 		break;
						      default:
						         this.state = "待申请"
						 } 
						 this.allPrice = res.data.data.price
						 this.processNo = res.data.data.processOn
						 this.proccessListDefult=processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
						 this.serviceId = res.data.data.paidServiceId
						 this.getServiceInfo(this.serviceId)
					}
				})
			},
			back(){
				uni.navigateBack()
			},
			
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
				this.serviceId = parseInt(option.serviceId)
				this.state = option.state
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}else{
				let  date=new Date();
				this.borrowDate=getNowFormatDate();
				let b = syncGetOrder("paid-service/show/" + this.serviceId)
				b.then((res)=>{
					 console.log("收费服务异步",res)
					 if(res.data.code == 200){
						 if(res.data.data.status != 0){
							this.state = "服务已下架"
							uni.showModal({
								content:'该服务已下架',
								showCancel:false
							})
							// uni.navigateBack()
						 }else{
							 this.goodsName = res.data.data.title
							 this.goodsDetail = res.data.data.intro
							 this.goodsUnitPrice = res.data.data.price
							 this.allPrice = this.goodsUnitPrice
							 let b = this.loadImg(res.data.data.picture.split(',')[0])
							 // let b = this.loadImg(267)
							 b.then((v)=>{
								 // console.log(v)
								this.goodsImg = v
							 })
							 this.$forceUpdate()
						 }
					}
				})
				// this.getServiceInfo(this.serviceId)
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.goods-image{
		margin: 20rpx 0 20rpx 50rpx;
		width: 200rpx;
		height: 200rpx;
	}
	.goods-title{
		margin: 10rpx 0 10rpx 50rpx;
		font-size: 20rpx;
	}
	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.payway-style {
		display: flex;
		flex-direction: column;
		width: 665rpx;
		margin-left: 18rpx;
	}
</style>
